<template>
	<view
		class="layout"
		:class="{
			isSkelett: isSkelett,
			offShelf: !!productOtherParams.isExpire
		}"
	>
		<view class="layout-header">
			<view class="layout-header-content">
				<DistributionCarousel
					:height="388"
					:list="bannerList"
					footerType="detail"
					:isTandianFull="isTandianFull"
					:isExpire="productOtherParams.isExpire"
					borderRadius="24rpx 24rpx 0 0"
				/>
				<button open-type="share" class="share-btn flex col-center row-center">
					<!-- <image src="/static/tandian/icon_xqy_share@3x.png" /> -->
				</button>
				<view class="layout-header-footer flex row-between">
					<view class="layout-header-footer-left flex col-center">
						<block
							v-if="
								Object.keys(comboList[comboIndex]).length &&
								comboList[comboIndex].commissionMoney > 0 &&
								comboList[comboIndex].cpsRadio > 0
							"
						>
							<image src="/static/detail/icon_xqy_title@3x.png" />
							<view class="money-box">
								<text class="money-icon">￥</text>
								<text class="money-num">{{ comboList[comboIndex].commissionMoney || 0 }}</text>
							</view>
							<view class="money-back">返佣{{ comboList[comboIndex].cpsRadio || 0 }}%</view>
						</block>
					</view>
					<view class="layout-header-footer-right flex-col col-end row-center">
						<view class="text-one">仅剩{{ remainingNumber || 0 }}位</view>
						<view class="text-two">{{ productOtherParams.saleCount }}/{{ productOtherParams.tdStock || 0 }}</view>
					</view>
				</view>
				<view class="layout-header-content-title">
					<text>{{ productOtherParams.productTitle || '' }}</text>
				</view>
				<view class="flex row-between layout-header-sales">
					<view class="detail-price-box">
						<view class="preferential-price">
							￥
							<text>{{ (productOtherParams.salePrice || productOtherParams.originPrice) / 100 }}</text>
						</view>
						<view v-if="productOtherParams.salePrice" class="original-price">￥{{ productOtherParams.originPrice / 100 }}</view>
					</view>
					<view class="detail-sale">已售 {{ productOtherParams.saleAmount || 0 }}</view>
				</view>
			</view>
		</view>

		<!-- 探店信息 -->
		<view class="layout-info">
			<view class="layout-info-title layout-common-title">
				<text>探店要求</text>
			</view>
			<view class="layout-info-title-content">{{ productOtherParams.content }}</view>
			<view class="layout-info-require col-center" v-if="productOtherParams.productRemark">
				<view class="layout-info-require-left">备注：</view>
				<view class="layout-info-require-right">
					<text>{{ productOtherParams.productRemark }}</text>
				</view>
			</view>
		</view>

		<!-- 探店套餐 -->
		<view class="layout-combo">
			<view class="layout-combo-title layout-common-title">
				<text>选择套餐</text>
			</view>

			<view class="layout-combo-specification">
				<view
					:key="item.id"
					v-for="(item, index) in comboList"
					@click="changeComboInfo(item, index)"
					:class="{ active: index === comboIndex }"
					class="layout-combo-specification-item"
				>
					<text>{{ item.subTitle }}</text>
				</view>
			</view>

			<view class="layout-combo-store">
				<view class="layout-combo-store-left">
					<text>门店</text>
				</view>

				<view class="layout-combo-store-right">
					<view class="layout-combo-store-right-title">
						<view class="layout-combo-store-right-title-left">
							{{ defaultShopsInfo.name }}
						</view>
						<view @click.prevent="openTandianStore" class="layout-combo-store-right-title-right">
							<text>{{ shopsList.length }}家店适用</text>
							<image src="@/static/tandian/icon_sqtd_right.png" />
						</view>
					</view>

					<view class="layout-combo-store-right-content">
						{{ defaultShopsInfo.address }}
					</view>
				</view>
			</view>
		</view>
		<!-- 拼团探店 :isTandianFull="isTandianFull"-->
		<view class="layout-group" v-if="productOtherParams.groupInfos.length">
			<view class="layout-common-title layout-group-title flex row-between col-center">
				<text>拼团探店</text>
				<view class="more-group" @click="toAllGroup">
					{{ productOtherParams.groupInfos.length || 0 }}个团正在进行{{
						productOtherParams.tdSeekApplyId === -1 ? '，可直接参与' : ''
					}}
					<image src="@/static/tandian/icon_sqtd_right.png" />
				</view>
			</view>
			<view class="layout-group-content">
				<SwiperGroup
					:height="150"
					:list="productOtherParams.groupInfos"
					:isAuto="true"
					:isVertical="true"
					:detailInfo="defaultComboInfo"
					:productInfo="productOtherParams"
					:isExpire="productOtherParams.isExpire"
				/>
			</view>
		</view>
		<!-- 操作流程 -->
		<view class="layout-flow">
			<view class="layout-flow-title layout-common-title">
				<text>操作流程</text>
			</view>
			<view class="layout-flow-content flex col-start row-between">
				<block v-for="item in flowList" :key="item.image">
					<view class="layout-flow-content-item">
						<view class="flex col-center row-center image-box">
							<image :src="'/static/tandian/' + item.image + '.png'" />
							<image src="@/static/tandian/icon_xqy_lc@3x.png" v-if="item.isArrow" class="layout-flow-content-arrow" />
						</view>
						<view class="label-box">{{ item.label || '' }}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 额外奖励 -->
		<view class="layout-reward" v-if="productOtherParams.blnReward === 1">
			<view class="layout-reward-title layout-common-title">
				<text>额外奖励</text>
			</view>
			<view class="layout-reward-content">
				<view class="layout-reward-content-title flex col-center">
					<image src="/static/detail/icon_xqy_jl@3x.png" />
					<text>回传视频得额外奖励</text>
				</view>
				<view class="layout-reward-content-tableH flex row-between table-item">
					<view class="item-one line-1">主播等级</view>
					<view class="item-two">红包金额</view>
				</view>
				<block v-if="productOtherParams.rewardLevelAmounts.length">
					<view
						class="layout-reward-content-tableB flex row-between table-item"
						v-for="item in productOtherParams.rewardLevelAmounts"
						:key="item.level"
					>
						<view class="item-one line-1">{{ item.level }}</view>
						<view class="item-two">¥{{ item.amount ? (item.amount / 100).toFixed(2) : 0 }}</view>
					</view>
				</block>
				<block v-if="productOtherParams.rewardRemark">
					<view class="reward-remind">发片说明：</view>

					<view class="reward-remind" v-html="productOtherParams.rewardRemark"></view>
				</block>
			</view>
		</view>
		<!-- 套餐详情 & 购买须知 -->
		<view class="layout-product-detail">
			<ProductDetailTabs :isSkelett="isSkelett" ref="productDetailTabs" :list="buyNoticeAndComboList" />
		</view>

		<!-- 申请探店 :isTandianFull="isTandianFull"-->
		<DistributionTandian
			v-show="!isSkelett"
			:detailInfo="defaultComboInfo"
			:productInfo="productOtherParams"
			:isExpire="productOtherParams.isExpire"
		/>
		<!-- 倒计时 -->
		<Countdown
			ref="Countdown"
			v-show="!isSkelett"
			@changeisExpire="changeisExpire"
			:nowTime="productOtherParams.now"
			:endTime="productOtherParams.endTime"
			:isExpire="productOtherParams.isExpire"
			:endTimeStr="productOtherParams.endTimeStr"
		/>
		<!-- 拼团弹窗 :isTandianFull="isTandianFull"-->
		<AllGroupPopup
			v-model="isShowAllGroup"
			:updateListFn="chooseAccItem"
			:selectAccount.sync="getAccountItem"
			:listData="productOtherParams.groupInfos"
			@clickSure="clickSureFn"
			:detailInfo="defaultComboInfo"
			:productInfo="productOtherParams"
			:isExpire="productOtherParams.isExpire"
		/>
		<dyPopupCode />
		<dyPopupBind />
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { getIndexListBanner } from '@/api/tandian';
import { saveCodeImageCom } from '@/utils/common';
import { getOperateId } from '@/api';
import { getDomeInfo, defaultImageUrl, formatCommissionsModel } from '@/utils';
import { getDyAuthCode } from '@/utils';
import Countdown from './components/Countdown';
import ProductDetailTabs from './components/ProductDetailTabs.vue';
import DistributionTandian from '@/components/distributionTandian';
import DistributionCarousel from '@/components/distributionCarousel';
import SwiperGroup from '@/components/groupManage/swiperGroup';
import AllGroupPopup from '@/components/groupManage/allGroupPopup';
import { checkDyAuth } from '@/api/third';
import dyPopupCode from '@/components/dyPopup/dyPopupCode.vue';
import dyPopupBind from '@/components/dyPopup/dyPopupCode.vue';
const placeholderBgImage = Object.freeze(`${defaultImageUrl}image/img_xqy_advertise.png`);

export default {
	name: 'ProductDetail',

	data() {
		return {
			isSkelett: true,
			isTandianFull: false,

			placeholderBgImage,
			productDetailHtml: '',

			bannerList: [],
			comboList: [
				{
					subTitle: '骨架图'
				}
			],

			comboIndex: 0,
			defaultComboInfo: {},

			isOpen: false,
			shopsList: [],
			defaultShopsInfo: {
				name: '',
				address: ''
			},

			isContentLength: false,

			productOtherParams: {
				content: ''
			},
			buyNoticeAndComboList: [],
			isShowNotBind: false, // 未完善弹层显示隐藏
			isShowNotBindCode: false, //未绑定显示隐藏
			codeImage: '',
			flowList: [
				{ image: 'icon_xqy_login@3x', isArrow: true, label: '登录账号' },
				{ image: 'icon_xqy_shop@3x', isArrow: true, label: '申请探店' },
				{ image: 'icon_xqy_shenhe@3x', isArrow: true, label: '审核通过' },
				{ image: 'icon_xqy_video@3x', isArrow: true, label: '上传视频' },
				{ image: 'icon_xqy_money@3x', isArrow: false, label: '佣金到账' }
			],
			isShowAllGroup: false // 全部拼团弹窗
		};
	},

	onLoad(params) {
		let { scene, productId, ...otherParams } = params;

		if (scene) {
			let formScene = decodeURIComponent(scene)
				.split('&')
				.map((item) => item?.split?.('='));

			formScene = Object.fromEntries(formScene);

			productId = formScene.productId;
			Object.assign(otherParams, formScene);
		}

		this.pageAllParams = {
			...otherParams,
			bizProductId: productId
		};

		this.getPageAllData();
		const { getDyCodeImage, getToken } = this;

		if (getDyCodeImage) {
			this.codeImage = getDyCodeImage;
		} else if (getToken) {
			getDyAuthCode().then((res) => {
				console.log(res);
				this.codeImage = res;
			});
		}
	},

	onShow() {
		const { getUserOperateId = '', getToken = '' } = this;
		if (!getUserOperateId && getToken) {
			this.getOperateIdAction();
		}
	},
	computed: {
		...mapGetters(['coordinate', 'getDyCodeImage', 'getToken', 'getUserOperateId']),

		remainingNumber() {
			const {
				productOtherParams: { saleCount, tdStock }
			} = this;

			return tdStock - saleCount || 0;
		}
	},

	methods: {
		...mapMutations(['changeMerchantStore', 'changeUserOperateId']),
		async checkUserStatus() {
			// 0-没有绑定抖音账号，1-已绑定抖音号，2-默认抖音账号信息不完善,3-默认抖音账号信息完整
			let result = await checkDyAuth();
			const { data = { checkStatus: 1 } } = result;
			let getStatus = data.checkStatus;
			if (getStatus === 0) {
				this.isShowNotBind = true;
				this.isShowNotBindCode = true;
			} else if (getStatus === 2) {
				this.isShowNotBind = true;
				this.isShowNotBindCode = false;
			}
		},
		isOnePrice(params = {}) {
			const { commissionType } = params;

			/**
			 * 1 拍摄费
			 * 2拍摄费 加CPS
			 * 3 CPS
			 */
			const someList = [1, 2];

			return someList.includes(commissionType);
		},

		isCommission(params = {}) {
			const { commissionType } = params;
			const someList = [2, 3];

			return someList.includes(commissionType);
		},

		changeComboInfo(params, index) {
			const { comboIndex, productOtherParams } = this;
			if (index === comboIndex) {
				return;
			}

			this.comboIndex = index;
			this.defaultComboInfo = params;

			this.productOtherParams = {
				...productOtherParams,

				commissionsList: formatCommissionsModel(params.commissionsList)
			};
		},

		changeisExpire() {
			this.productOtherParams.isExpire = 1;
		},

		getPageAllData() {
			const { comboIndex, coordinate, pageAllParams } = this;

			const params = {
				...pageAllParams,
				...coordinate
			};

			getIndexListBanner(params).then((res) => {
				const { code, data } = res;

				this.isSkelett = false;

				if (code !== 200) {
					return;
				}

				const { items, shops, loopImgs, buyNoticeTitle, bizProductItemContents, ...otherParams } = data || {};

				// 套餐
				this.comboList = items;

				if (!items.length) {
					return;
				}

				const singleItem = items[comboIndex];
				this.defaultComboInfo = singleItem;

				// 是否探店满员
				// this.isTandianFull = otherParams.tdStock === otherParams.saleCount;

				this.productOtherParams = {
					...otherParams,

					commissionsList: formatCommissionsModel(singleItem.commissionsList)
				};

				this.$nextTick((e) => {
					this.setIsContentLength();
				});
				// Banner
				this.bannerList = (loopImgs || []).map((item) => ({
					mediaUrl: item
				}));

				// 商家列表（默认展示第一家门店）
				this.shopsList = shops || [];
				this.defaultShopsInfo = (shops || [])[0] || {};

				this.changeMerchantStore(shops);

				// 购买须知 & 套餐详情
				let typeList = [];
				(bizProductItemContents || []).forEach((item) => {
					const { subTitle, contentDesc } = item;
					const singleObject = {
						getChecked: true,
						optionName: contentDesc
					};
					const index = typeList.findIndex((item) => item.titles === subTitle);

					if (index === -1) {
						typeList.push({
							titles: subTitle,
							option: [singleObject]
						});
					} else {
						typeList[index].option.push(singleObject);
					}
				});
				this.buyNoticeAndComboList = [
					{
						title: '套餐详情',
						children: typeList,
						icon: `https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_e81ec86430744a608f7c3d0163ab2ed9.png`
					},
					{
						title: '购买须知',
						children: buyNoticeTitle || [],
						icon: `https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_093b6d7f0a524835a872a8383470e3d2.png?v=${Date.now()}`
					}
				];
			});
		},

		openTandianStore() {
			const url = '/tandianPage/TandianStore';

			uni.navigateTo({
				url
			});
		},

		changeIsOPen() {
			this.isOpen = !this.isOpen;
			this.$refs?.productDetailTabs.getDemoPosition?.();
		},

		setIsContentLength() {
			getDomeInfo.call(this, '.layout-flow-title', false).then((res) => {
				const { height = 0 } = res;

				this.isContentLength = height > 40;
				this.$refs?.productDetailTabs.getDemoPosition?.();
			});
		},

		openMaterialDetail() {
			const {
				isSkelett,
				pageAllParams: { bizProductId }
			} = this;

			if (isSkelett) {
				return;
			}

			uni.navigateTo({
				url: `/materialPage/MaterialDownload?productId=${bizProductId}`
			});
		},
		// 保存二维码
		saveCodeImage() {
			const self = this;
			saveCodeImageCom(this.codeImage, function () {
				self.isShowNotBindCode = false;
			});
		},
		async getOperateIdAction() {
			let result = await getOperateId();
			const { data = {} } = result || {};
			this.changeUserOperateId(data?.operateId || 0);
		},
		toAllGroup() {
			this.isShowAllGroup = true;
		}
	},

	onPageScroll(e) {
		this.$refs?.productDetailTabs.changePageScroll?.(e);

		this.$refs?.Countdown.changePageScroll?.(e);
		// this.$refs?.FunctionButton.changePageScroll?.(e);
	},

	onShareAppMessage() {
		const { getUserOperateId = 0 } = this;
		let shareObj;
		shareObj = {
			title: '您的好朋友邀您一起探店赚钱!',
			path: `authorizePage/invitatAuth?aUserId=${getUserOperateId}&productId=${this.pageAllParams?.bizProductId}`,
			success() {
				console.log('转发发布器已调起');
			},
			fail() {
				console.log('转发发布器调起失败');
			}
		};
		return shareObj;
	},

	components: {
		DistributionCarousel,
		DistributionTandian,
		ProductDetailTabs,
		SwiperGroup,
		Countdown,
		AllGroupPopup,
		dyPopupCode,
		dyPopupBind
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	min-height: 100vh;
	padding: 0 20rpx;
	@include Db_iosBottomDistance(580rpx);

	&.offShelf {
		@include Db_iosBottomDistance(490rpx);
	}

	&-header {
		min-height: 516rpx;
		padding-top: 20rpx;

		&-content {
			height: 100%;
			background: #fff;
			border-radius: 24rpx;
			position: relative;
			padding-bottom: 30rpx;
			&-title {
				color: #000;
				font-size: 36rpx;
				font-weight: bold;

				padding: 24rpx;
				min-height: 108rpx;

				display: flex;
				align-items: center;

				text {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;

					line-height: 54rpx;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}
			}
			.detail-price-box {
				padding-left: 24rpx;
				view {
					display: inline-block;
				}
				.preferential-price {
					color: $moneyColor;
					font-size: 24rpx;
					font-weight: bold;
					margin-right: 4rpx;
					text {
						font-size: 40rpx;
						@include Db_moneyStyle(400);
					}
				}
				.original-price {
					color: #999;
					font-size: 20rpx;
					margin-left: 4rpx;
					text-decoration: line-through;
				}
			}
			.detail-sale {
				padding-right: 24rpx;
				font-size: 28rpx;
				color: #666;
			}
			.share-btn {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 56rpx;
				height: 56rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 16rpx;
				image {
					width: 40rpx;
					height: 40rpx;
					display: inline-flex;
				}
			}
			.share-btn::before {
				content: '';
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				width: 40rpx;
				height: 40rpx;
				background: url(/static/tandian/icon_xqy_share@3x.png) no-repeat;
				background-size: 100%;
			}
		}
		&-footer {
			background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_dd03fb90749f4774a13055c8650ea0c8.png);
			width: 100%;
			height: 100rpx;
			background-size: 100% 100%;
			padding: 0 30rpx;
			&-left {
				image {
					width: 96rpx;
					height: 76rpx;
					margin: 0 14rpx;
				}
				.money-box {
					color: #fff;
					.money-icon {
						font-size: 24rpx;
						font-family: font-number;
					}
					.money-num {
						font-size: 56rpx;
						font-weight: bold;
						padding-right: 16rpx;
						font-family: font-number;
					}
				}
				.money-back {
					background: #ff6b11;
					border-radius: 18rpx 18rpx 18rpx 0px;
					padding: 0 12rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #ffffff;
					height: 36rpx;
					line-height: 36rpx;
				}
			}
			&-right {
				.text-one {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}
				.text-two {
					font-size: 20rpx;
					color: #333333;
				}
			}
		}
		button::after {
			display: none;
		}
	}

	&-info {
		margin-top: 20rpx;
		padding: 0 28rpx;
		overflow: hidden;
		border-radius: 24rpx;
		background: #fff;
		&-title {
			position: relative;
			button {
				border: none;
				background: none;
			}
			button::after {
				display: none;
			}
			&-content {
				padding: 28rpx 0 24rpx;
			}
		}
		&-price {
			padding: 28rpx 0;

			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				.commission-info {
					position: relative;
					min-width: 200rpx;
					height: 56rpx;
					border-radius: 12rpx;
					background: #fff0e7;
					overflow: hidden;
					width: auto;
					font-size: 0;
					color: #ff6b11;
					padding-left: 60rpx;
					padding-right: 16rpx;

					.money-icon {
						font-size: 24rpx;
						font-family: font-number;
					}
					.money-num {
						font-size: 40rpx;
						font-weight: bold;
						padding-right: 16rpx;
						font-family: font-number;
					}
					.money-back {
						font-size: 20rpx;
						padding-left: 16rpx;
						border-left: 1px solid rgba(255, 107, 17, 0.4);
					}
					image {
						width: 56rpx;
						height: 56rpx;
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}

			&-right {
				color: #333;
				font-size: 26rpx;
				text-align: right;
				line-height: 28rpx;

				view:nth-child(2) {
					color: #999;
					font-size: 18rpx;
					line-height: 20rpx;
					margin-top: 8rpx;
				}
			}
		}

		&-require {
			border-top: 2rpx dashed #eee;
			padding: 28rpx 12rpx 28rpx 0;

			display: flex;
			font-size: 26rpx;

			&-left {
				&.layout-label {
					text-indent: 2em;
				}
				width: 130rpx;
				color: #666;
			}

			&-right {
				flex: 1;
				color: #333;
				line-height: 36rpx;
				font-weight: bold;

				position: relative;

				&.ellipsis {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;

					view {
						position: absolute;
						bottom: 0;
						right: 0;
						padding-left: 6rpx;
						background: #fff;
					}
				}

				view {
					display: inline-block;
					position: static;

					text {
						color: #487fff;
						font-size: 24rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	&-combo {
		min-height: 300rpx;
		margin-top: 20rpx;
		padding: 0 28rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 24rpx;

		&-specification {
			display: flex;
			flex-wrap: wrap;
			padding: 28rpx 0 15rpx;

			&-item {
				height: 80rpx;
				line-height: 80rpx;
				background: #fff;
				border-radius: 8rpx;
				border: 1px solid rgba(0, 0, 0, 0.12);
				position: relative;
				padding: 0 20rpx;
				margin: 0 22rpx 15rpx 0;

				color: #333;
				font-size: 24rpx;
				font-weight: bold;

				&.active {
					background: #f5f7fc;
					border-radius: 4px;
					border: 1px solid #5359ff;
					color: #5359ff;
					&::after {
						content: '';
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						width: 20rpx;
						height: 20rpx;
						background: url('@/static/detail/icon_xqy_taocan@3x.png') no-repeat;
						background-size: cover;
					}
					&::before {
						content: '';
						position: absolute;
						bottom: -3rpx;
						right: -3rpx;
						width: 26rpx;
						height: 26rpx;
						background: #5359ff;
						border-radius: 4px 0px 4px 0px;
					}
				}
			}
		}

		&-store {
			padding: 30rpx 0;
			border-top: 2rpx dashed #eee;
			display: flex;
			color: #666;
			font-size: 26rpx;

			&-left {
				width: 72rpx;
			}

			&-right {
				flex: 1;

				&-title {
					display: flex;
					color: #333;

					&-left {
						flex: 1;
						font-size: 26rpx;
						font-weight: bold;
						line-height: 36rpx;
					}

					&-right {
						width: 150rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-left: 2rpx;
						}
					}
				}

				&-content {
					color: #999;
					font-size: 24rpx;
					margin-top: 8rpx;
					line-height: 36rpx;
					padding-right: 150rpx;
				}
			}
		}
	}

	&-flow {
		// min-height: 300rpx;
		margin-top: 20rpx;
		padding: 0 28rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 24rpx;

		&-content {
			margin: 30rpx 0;
			&-item {
				text-align: center;
				.image-box {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					background: #f5f7fc;
					position: relative;
					margin: 0 auto;
				}
				.label-box {
					color: #333;
					font-size: 24rpx;
					margin-top: 12rpx;
				}
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
			&-arrow {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: -48rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	&-group {
		margin-top: 20rpx;
		padding: 0 28rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 24rpx;
		&-title {
			padding-bottom: 24rpx;
			border-bottom: 1px dashed #eee;
		}
		.more-group {
			font-size: 24rpx;
			color: #666666;
			image {
				width: 32rpx;
				height: 32rpx;
				display: inline-block;
			}
		}
		&-content {
			padding: 30rpx 0;
		}
	}

	&-reward {
		margin-top: 20rpx;
		padding: 0 28rpx 20rpx 28rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 24rpx;
		&-content {
			&-title {
				margin: 28rpx 0 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}
			&-tableH {
				background: #f5f7fc;
				border: 1px solid #f5f7fc;
				border-bottom: none;
			}
			&-tableB {
				border: 1px solid #f5f7fc;
				border-top: none;
			}
			.table-item {
				padding: 14rpx 40rpx;
				font-size: 24rpx;
				color: #666;
				.item-one {
					width: calc(100% - 200rpx);
				}
				.item-two {
					width: 200rpx;
					color: #ff6b11;
					text-align: right;
				}
			}
			.reward-remind {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				margin-top: 10rpx;
			}
		}
	}

	&-placeholder-map {
		height: 200rpx;
		margin-top: 20rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	&-product-detail {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 24px;
	}

	&-common-title {
		height: 48rpx;
		margin-top: 22rpx;
		margin-left: -6rpx;

		display: flex;
		align-items: center;

		color: #000;
		font-size: 32rpx;
		font-weight: bold;

		image {
			width: 48rpx;
			height: 48rpx;
			// margin-right: 8rpx;
		}
	}

	// 骨架图
	&.isSkelett {
		.layout-header-content {
			background: $skelettBgColor;
		}

		.layout-common-title {
			width: 200rpx;
			border-radius: 12rpx;
			background: $skelettBgColor;

			text,
			image {
				visibility: hidden;
			}
		}
		.layout-info-title-content {
			margin-top: 20rpx;
		}
		.layout-combo-specification-item {
			&.active {
				&::before {
					background: none;
				}
			}
		}
		.layout-info-require-left,
		.layout-combo-store-left,
		.layout-info-price-right,
		.layout-placeholder-map,
		.layout-combo-specification-item,
		.layout-header-footer,
		.layout-header-content-title,
		.layout-header-sales,
		.layout-info-title-content,
		.layout-flow,
		.layout-group,
		.layout-reward,
		.layout-combo-store-right-title-right {
			border: none;
			border-radius: 12rpx;
			background: $skelettBgColor;
			view,
			text,
			image {
				visibility: hidden;
			}

			&::after {
				display: none;
			}
		}
	}
}
</style>
